﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ManageSystem管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">   
    <link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css" /> 
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">文件管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
				<li><a href="/index/toIndex"><i class="fa fa-home"></i> 首页</a></li>
				<li class="active">文件管理</li>
			</ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
	                 <!-- <span class="pull-right badge badge-info">32</span> -->
	                 <button class="btn btn-primary btn-addon btn-sm" data-toggle="modal" th:onclick="javascript: openUploadDialog()">
	                     <i class="fa fa-plus"></i>上传附件
	                 </button>
	            </div>
			    <div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th style="width:50px;">选择</th>
								<th style="width:80px;">编码</th>
								<th style="width:400px;">文件名称</th>
								<th>文件类型</th>
								<th style="width:80px;">文件大小</th>
								<th style="width:300px;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="item : ${file.list}">
								<td><input type="checkbox" class="flat-grey list-child" th:value="${item.id}" /></td>
								<td th:text="${item.code}"></td>
								<td th:text="${item.filename}"></td>
								<td th:text="${item.filetype}"></td>
								<td th:text="${item.filesize}"></td>
								<td>
									<a th:href="@{/file/download(id=${item.id})}" target="_blank" class="btn btn-xs btn-success">下载预览</a>
									<span>&nbsp;|&nbsp;</span>
									<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:aid="${item.id}" th:onclick="javascript:confrimRemove(this.getAttribute('aid'))">删除</a>
								</td>
							</tr>
							<tr th:if="${#lists.isEmpty(file.list)}">
								<td colspan="7" align="center">无数据</td>
							</tr>
						</tbody>
					</table>
			    </div>
			    <div class="panel-footer bg-white text-right">
                     <ul class="pagination">
                         <li><a th:href="@{/file/fileManage/list(pageNum=${file.navigateFirstPage},pageSize=${file.pageSize})}" title="首页" th:class="${file.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
                         <li><a th:href="@{/file/fileManage/list(pageNum=${file.prePage},pageSize=${file.pageSize})}" title="上一页" th:if="${file.hasPreviousPage}">‹</a></li>
                         <li th:each="pageinfo : ${file.navigatepageNums}"><a th:href="@{/file/fileManage/list(pageNum=${pageinfo},pageSize=${file.pageSize})}" th:class="${pageinfo == file.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
                         <li><a th:href="@{/file/fileManage/list(pageNum=${file.nextPage},pageSize=${file.pageSize})}" title="下一页" th:if="${file.hasNextPage}">›</a></li>
                         <li><a th:href="@{/file/fileManage/list(pageNum=${file.navigateLastPage},pageSize=${file.pageSize})}" title="未页" th:class="${file.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
                     </ul>
                 </div>
			</section>
		</div>
	</div>
	
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="upload-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
                    	<div class="alert alert-block alert-danger">
	                        <strong>注意!</strong> 上传成功后切记点击确定按钮，否则不会保存！
	                    </div>
                    	<form class="col s12" id="form1" enctype="multipart/form-data">
							<div id="uploader" class="wu-example">
							    <div class="btns">
									<input type="file"  name="file" id="file" value=""  onchange="upload(this)"/>
							    </div>
							</div>
						</form>
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="postData();">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<!--<script type="text/javascript" src="/resource/js/webuploader-0.1.5/webuploader.js"></script>-->
	<script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
	<script type="text/javascript">
		var createBy = null;

		//上传文件发送请求
		function postData(){
			var file = new FormData(document.getElementById("form1"));
			$.ajax({
				url:'/upload/uploadFile', /*接口域名地址*/
				type:'post',
				data: file,
				contentType: false,
				processData: false,
				success:function(res){
					console.log(res.data);
					if(res.success){
						var fileManage = JSON.stringify({
							"filename":res.data.originalFilename,
							"filepath":res.data.filepath,
							"filesize":res.data.filesize,
							"filetype":res.data.filetype,
							"createBy":createBy
						});
						$.ajax({
							url:"/file/add",
							type: "post",
							dataType: "json",
							data:fileManage,
							contentType: "application/json",
							success: function(data){
								if(data.success){
									$("body").MessageBox({
										type: 'success',
										message:res.info,
										timeout:3000,
										callbak:null
									});
									setTimeout(function() {
										//
										window.location.href = "/file/fileManage/list";
									}, 500);
								}else {
									$("body").MessageBox({
										type: 'error',
										message:res.info,
										timeout:3000,
										callbak:null
									});
								}
							}
						});

					}else{
						$("body").MessageBox({
							type: 'error',
							message:res.info,
							timeout:3000,
							callbak:null
						});
					}
				}
			})
		}

		//选择文件回显
		function upload(thisEvent){
			// 上传附件的回显
			var str = $(thisEvent).val();
			var index = str.lastIndexOf("\\");
			str = str.substring(index + 1, str.length);

			$(thisEvent).parent().next().html(str);
		};

		//获取当前登录的用户
		var userStr = sessionStorage.getItem("douglas");
		if(userStr == null || userStr == "" || userStr == "undefined"){
			window.location.href = "/admin/user/toLogin";
		}else{
			var user = JSON.parse(userStr);
			createBy = user.realname;
		}

		//显示上传文件框
		function openUploadDialog(){
			$("#upload-dialog").modal();
		}


		window.onload = function(){
			renderCheckBox();
		}

		function renderCheckBox(){
			$('input').on('ifChecked', function(event) {
			    $(this).parents('li').addClass("task-done");
			    console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
			    $(this).parents('li').removeClass("task-done");
			    console.log('not');
			});
			
			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
			    checkboxClass: 'icheckbox_flat-grey',
			    radioClass: 'iradio_flat-grey'
			});
		}

		//弹出确认删除窗口
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}

		//确认删除请求
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/file/fileManage/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
	</script>
</body>
</html>
